<template>
    <div>
        <el-card v-for="elem in filterData" :key="elem.pwd" class="box-card">  <!--v-for、v-if用来和数据结合实现动态渲染(循环、条件)-->
            <div slot="header" class="clearfix">
                <span class="head">{{ elem.name }}</span>
            </div>

            <div class="text item" v-for="(item, key, index) in elem" :key="index">
                <strong>{{ key }}</strong> ： {{ item }}
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Cards",
    data() {
        return {
            staffData: [],
            value: null,  //Tabs选择的值
            filterData: [],
        }
    },
    methods: {
        getData() {
            //获取全部维修+监控人员信息
            this.staffData = this.$store.getters.getAllUser;
            // console.log(this.staffData)
        },
        // eslint-disable-next-line vue/no-dupe-keys
        filtData(){
            return this.staffData.filter( elem => {
                // console.log("role: ", elem.role);
                if(this.value === "1") {
                    // console.log("我现在的值是", 1)
                    return elem.role === 2;
                }
                else if(this.value === "2") {
                    // console.log("我现在的值是", 2)
                    return elem.role === 3;
                }else{
                    // console.log("我现在的值是", 0)
                    return this.staffData;
                }
            })
        },
        jumpTo(Assign) {
            // console.log('分配工单')
            this.$router.push({
                path: './Assign',
                params: {
                    Assign
                }
            })
        }
    },
    mounted() {
        this.value = this.$route.query.value
        this.getData();
        this.filterData = this.filtData();
        // console.log(this.filterData)
    },

}
</script>


<style>
.text {
    font-size: 14px;

}

.item {
    margin-bottom: 10px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    /*width: 100%;*/
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.item {
    text-align: left;
}

</style>
